<template>
	<div class="w100 h100 flex-col p-t-26 p-l-10 p-r-10">
		<div class="btn_box flex">
			<div id="btn1" class="btn p-10 pointer" :class="{ checked: showKey == 1 }" @click="showKey = 1">微震监测</div>
			<div id="btn2" class="btn p-10 m-l-15 pointer" :class="{ checked: showKey == 2 }" @click="showKey = 2">事件查询</div>
		</div>
		<Transition name="fade-transform" mode="out-in" appear>
			<div class="flex-col f1 h0" v-if="showKey == 1">
				<div class="flex m-between p-t-10 p-b-10">
					<div class="hour flex-col">
						<div class="p-20 flex m-between">
							<div class="flex-col">
								<div>
									<span class="left_ract m-r-5"></span>
									<span style="vertical-align: top"> 今天微震次数</span>
								</div>
								<span class="m-t-5" style="font-size: 12px">{{ date(new Date(), 'YYYY/MM/DD') }}</span>
							</div>
							<div class="flex-center">
								<my-number
									:value="dailyData.dailyCount"
									style="
										font-size: 36px;
										font-weight: bold;
										background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									"
								>
									<template #suffix>
										<span style="font-size: 12px; margin-left: 5px; color: #fff">次</span>
									</template>
								</my-number>
							</div>
						</div>
						<div class="f1 h0">
							<my-echarts class="h100" :options="options1" />
						</div>
					</div>
					<div class="yesDay flex-col">
						<div class="p-20 flex m-between">
							<div class="flex-col">
								<div>
									<span class="left_ract m-r-5"></span>
									<span style="vertical-align: top"> 昨日微震次数</span>
								</div>
								<span class="m-t-5" style="font-size: 12px">{{ date(new Date(), 'YYYY/MM/DD', { D: -1 }) }}</span>
							</div>
							<div class="flex-center">
								<my-number
									:value="yestodayData.yestodayCount"
									style="
										font-size: 36px;
										font-weight: bold;
										background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									"
								>
									<template #suffix>
										<span style="font-size: 12px; margin-left: 5px; color: #fff">次</span>
									</template>
								</my-number>
							</div>
						</div>
						<div class="flex f1 h0 p-20 m-between">
							<div class="growth p-10 flex m-between">
								<div class="flex-center">
									<img src="@/assets/img/rd/growth_l.png" style="vertical-align: middle" alt="" />
									<div class="flex-col m-l-10">
										<span>周同比</span>
										<span style="font-size: 8px; transform: scale(0.83); margin-left: -8px">Weekly year-on-year</span>
									</div>
								</div>
								<div class="flex-center">
									<my-number
										:value="yestodayData.weeklyRatio"
										:precision="2"
										style="
											font-size: 24px;
											font-weight: bold;
											background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
											-webkit-background-clip: text;
											-webkit-text-fill-color: transparent;
										"
									>
										<template #suffix>
											<span class="m-l-5">%</span>
										</template>
									</my-number>
									<iconpark-icon :name="yestodayData.weeklyRatioState == 1 ? 'shangsheng' : 'xiajiang'"></iconpark-icon>
								</div>
							</div>
							<div class="growth p-10 flex m-between m-l-10">
								<div class="flex-center">
									<img src="@/assets/img/rd/growth_r.png" style="vertical-align: middle" alt="" />
									<div class="flex-col m-l-10">
										<span>日环比</span>
										<span style="font-size: 8px; transform: scale(0.83); margin-left: -8px">Daily comparison</span>
									</div>
								</div>
								<div class="flex-center">
									<my-number
										:value="yestodayData.dailyRatio"
										:precision="2"
										style="
											font-size: 24px;
											font-weight: bold;
											background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
											-webkit-background-clip: text;
											-webkit-text-fill-color: transparent;
										"
									>
										<template #suffix>
											<span class="m-l-5">%</span>
										</template>
									</my-number>
									<iconpark-icon :name="yestodayData.dailyRatioState == 1 ? 'shangsheng' : 'xiajiang'"></iconpark-icon>
								</div>
							</div>
						</div>
					</div>
					<div class="weak flex-col">
						<div class="p-20 flex m-between">
							<div class="flex-col">
								<div>
									<span class="left_ract m-r-5"></span>
									<span style="vertical-align: top"> 近7天微震次数</span>
								</div>
								<span class="m-t-5" style="font-size: 12px"
									>{{ date(new Date(), 'YYYY/MM/DD', { D: -7 }) }} - {{ date(new Date(), 'YYYY/MM/DD') }}</span
								>
							</div>
							<div class="flex-center">
								<my-number
									:value="weeklyData.weeklyCount"
									style="
										font-size: 36px;
										font-weight: bold;
										background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									"
								>
									<template #suffix>
										<span style="font-size: 12px; margin-left: 5px; color: #fff">次</span>
									</template>
								</my-number>
							</div>
						</div>
						<div class="f1 h0">
							<my-echarts class="h100" :options="options2" />
						</div>
					</div>
				</div>
				<div class="flex-col f1 h0 p-b-10" style="flex-shrink: 0">
					<my-box class="h100" title="微震监测">
						<my-echarts class="h100" :options="options" />
					</my-box>
				</div>
			</div>

			<div class="f1 h0 p-t-10 p-b-10" v-else>
				<my-box class="h100" title="微震事件 ">
					<template #right>
						<div class="flex m-between">
							<!-- <div class="btn_box flex" @click="changeTab">
                                <div id="btn1" class="btn p-10 pointer">全量导出</div>
                            </div> -->
							<div class="flex">
								<div class="flex-center m-l-10">
									<my-date-pick
										type="daterange"
										v-model="form.date"
										range-separator="至"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										:teleported="false"
										:autoshortcuts="false"
									/>
								</div>
								<div class="flex-center pointer m-l-10">
									<my-input v-model="form.keyWord" :clearable="false" placeholder="搜索...">
										<template #suffix>
											<el-icon @click="refTable.reload()"><Search /></el-icon>
										</template>
									</my-input>
								</div>
							</div>
						</div>
					</template>
					<MyListPanel ref="refTable" :total="state.total" :loadFn="eventQueryFn">
						<template #default="{ page, size }">
							<my-table :data="state.list" :columns="state.columns">
								<template #index="{ $index }">
									<span style="color: #fff"> {{ $index + 1 + (page - 1) * size }}</span>
								</template>
							</my-table>
						</template>
					</MyListPanel>
				</my-box>
			</div>
		</Transition>
	</div>
</template>

<script setup name="/monitoring/microSeismic">
import date from '@u/date'
import { daily, weekly, yestoday, energy, eventQuery } from '@a/micro-seismic'

let showKey = ref(1)

// 近24小时微震次数
let dailyData = ref({}),
	options1 = computed(() => {
		let { date, hourlyCount } = dailyData.value
		return {
			grid: {
				left: '0%',
				right: '0%',
				top: '2%',
				bottom: '0%'
			},
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(3, 15, 39, 0.8)',
				borderColor: 'rgba(76, 107, 209, 0.5)',
				extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
				textStyle: {
					color: 'rgba(255, 255, 255, 1)'
				},
				axisPointer: {
					type: 'line',
					lineStyle: {
						color: '#57617B'
					}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false, //顶头显示
				data: date,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			yAxis: {
				type: 'value',
				boundaryGap: false,
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			series: [
				{
					name: '微震次数',
					type: 'line',
					stack: '总量',
					smooth: true,
					symbol: 'none',
					showSymbol: true,
					symbolSize: 80,
					lineStyle: {
						color: '#397BFD',
						width: 3
					},
					areaStyle: {
						color: {
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							type: 'linear',
							colorStops: [
								{
									offset: 0.22,
									color: 'rgba(57,123,253,0.00)'
								},
								{
									offset: 0.89,
									color: 'rgba(57,123,253,0.7)'
								}
							]
						}
					},
					data: hourlyCount
				}
			]
		}
	})
daily().then((res) => {
	dailyData.value = res.data
})

// 近一周微震次数
let weeklyData = ref({}),
	options2 = computed(() => {
		let { date, dailyCount } = weeklyData.value
		return {
			grid: {
				left: '0%',
				right: '0%',
				top: '2%',
				bottom: '0%'
			},
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(3, 15, 39, 0.8)',
				borderColor: 'rgba(76, 107, 209, 0.5)',
				extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
				textStyle: {
					color: 'rgba(255, 255, 255, 1)'
				},
				axisPointer: {
					type: 'line',
					lineStyle: {
						color: '#57617B'
					}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false, //顶头显示
				data: date,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			yAxis: {
				type: 'value',
				boundaryGap: false,
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			series: [
				{
					name: '微震次数',
					type: 'line',
					stack: '总量',
					smooth: true,
					symbol: 'none',
					showSymbol: true,
					symbolSize: 80,
					lineStyle: {
						color: '#45B854',
						width: 3
					},
					areaStyle: {
						color: {
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							type: 'linear',
							colorStops: [
								{
									offset: 0.22,
									color: 'rgba(69,184,84,0.00)'
								},
								{
									offset: 0.89,
									color: 'rgba(69,184,84,0.70)'
								}
							]
						}
					},
					data: dailyCount
				}
			]
		}
	})
weekly().then((res) => {
	weeklyData.value = res.data
})

// 昨日微震次数
let yestodayData = ref({})
yestoday().then((res) => {
	yestodayData.value = res.data
})

// 微震次数和能量统计
let energyData = ref({}),
	options = computed(() => {
		let { date = [], monitoringValue = [] } = energyData.value
		return {
			//鼠标滑过提示栏
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				backgroundColor: 'rgba(3, 15, 39, 0.8)',
				borderColor: 'rgba(76, 107, 209, 0.5)',
				extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
				textStyle: {
					color: 'rgba(255, 255, 255, 1)'
				}
			},
			//图表选择栏
			legend: {
				// icon: "square",
				top: '2%',
				right: '2%',
				itemHeight: 8, //修改icon图形大小
				textStyle: {
					fontSize: 13,
					color: '#fff'
				},
				data: [
					{
						name: '微震次数',
						icon: 'square'
					},
					{
						name: '总能量',
						icon: 'circle'
					}
				]
			},
			//图标离容器的距离
			grid: {
				left: '1%',
				right: '1%',
				bottom: '2%',
				//是否包含坐标轴
				containLabel: true
			},
			//x坐标轴
			xAxis: [
				{
					type: 'category',
					data: date,
					axisLabel: {
						fontSize: 12,
						color: '#fff',
						interval: 'auto'
					}
				}
			],
			//y坐标轴
			yAxis: [
				{
					type: 'value',
					axisLabel: {
						fontSize: 12,
						color: '#fff',
						interval: 'auto'
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(224,230,241,0.2)',
							type: 'dashed'
						}
					}
				},
				{
					type: 'value',
					position: 'right',
					axisLabel: {
						formatter: '{value}',
						color: '#fff'
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(224,230,241,0.2)',
							type: 'dashed'
						}
					}
				}
			],
			// 数据展示区域
			series: [
				{
					name: '微震次数',
					type: 'bar',
					itemStyle: {
						borderRadius: [20, 20, 0, 0],
						color: {
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							type: 'linear',
							colorStops: [
								{
									offset: 0,
									color: '#4D88FE'
								},
								{
									offset: 1,
									color: '#4DB5FF'
								}
							]
						}
					},
					barWidth: 15,
					data: monitoringValue[0]
				},
				{
					name: '总能量',
					yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
					type: 'line',
					color: '#FD9E39',
					data: monitoringValue[1]
				}
			]
		}
	})
energy().then((res) => {
	energyData.value = res.data
})

// 事件查询
let refTable = shallowRef(null),
	form = ref({
		date: [],
		keyWord: ''
	}),
	state = reactive({
		total: 0,
		list: [],
		columns: [
			{
				label: '序号',
				prop: 'index',
				width: 60
			},
			{
				label: '日期',
				prop: 'date'
			},
			{
				label: '时间',
				prop: 'time'
			},
			{
				label: 'X',
				prop: 'xvalue'
			},
			{
				label: 'Y',
				prop: 'yvalue'
			},
			{
				label: 'Z ',
				prop: 'zvalue'
			},
			{
				label: '能量',
				prop: 'energyValue'
			}
		]
	})

function eventQueryFn(pageNum, pageSize) {
	let data = addDateRange(form.value, 'date', 'Date')
	eventQuery({ pageNum, pageSize, ...data }).then((res) => {
		state.total = res.data?.total
		state.list = res.data?.rows
	})
}
</script>

<style lang="scss" scoped>
.btn_box {
	color: #fff;
}
.btn {
	opacity: 1;
	border-radius: 4px;
	background: linear-gradient(180deg, #1c437e 1%, #091f40 100%);
	box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
}
.checked {
	background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
}
.hour,
.weak,
.yesDay {
	box-sizing: border-box;
	width: 610px;
	border: 1px solid rgba(76, 107, 209, 0.5);
	background: rgba(3, 15, 39, 0.4);
	color: #fff;
	font-size: 14px;
}
.left_ract {
	display: inline-block;
	width: 5px;
	height: 100%;
	background-color: #4d88fe;
}
.growth {
	border-radius: 2px;
	background: rgba(3, 15, 39, 0.4);
	box-sizing: border-box;
	border: 1px solid rgba(76, 107, 209, 0.5);
	box-shadow: inset 0px 0px 8px 0px #3468d8;
}
</style>
